<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>美兰数据文化馆与图书馆</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/huazhi/lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/huazhi/css/public.css" media="all">
    <link rel="shortcut icon" href="<%=request.getContextPath()%>/huazhi/images/favicon.ico"/>
    <style>
        .divhtml{
            line-height: 20px;
            padding: 9px 0px;
            text-align:left;
            position:relative;
            display:block;
            float:left;
            font-weight: 400;
        }
    </style>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-tab layui-tab-brief" lay-filter="component-tabs-hash">
                <ul class="layui-tab-title">
                    <li lay-id="one1" id="one"  class="layui-this">图片列表</li>
                    <li lay-id="two1" id="two">数据列表</li>
                </ul>
                <div class="layui-tab-content" style="height: auto">
                    <blockquote class="layui-elem-quote">
                        <div class="layui-inline">
                            <div class="layui-input-inline">
                                <input class="layui-input searchval"  type="text" placeholder="请输入搜索的内容">
                            </div>
                            <button class="layui-btn" type="button" id="search_btn"> <i class="lifechain"></i>搜索</button>
                        </div>
                    </blockquote>
                    <div class="layui-tab-item layui-show">
                        <div class="layui-fluid layadmin-cmdlist-fluid" style="padding-bottom: 15px;">
                            <div class="layui-row layui-col-space30" id="searchImage">
                            </div>
                        </div>
                        <div id="laypage"></div>
                    </div>
                    <div class="layui-tab-item">
                        <table class="layui-hide" id="productLibrary" lay-filter="productLibrarys"></table>
                        <div id="laypagetable"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<input type="hidden" id="curnum" value="1">
<script type="text/html" id="operation">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="info">详情</a>
    <a class="layui-btn layui-btn-primary layui-btn-xs" title="生命链"  lay-event="lifechainon">
        <i class="time">&#xe617;</i>
    </a>
</script>
<script type="text/html" id="inOrOut">
    {{#  if(d.inOrOut === '在库'){ }}
    <a class="layui-btn layui-btn-primary layui-btn-xs">{{ d.inOrOut }}</a>
    {{#  } else { }}
    <a class="layui-btn  layui-btn-xs">{{ d.inOrOut }}</a>
    {{#  } }}
</script>
<script type="text/html" id="state">
    {{#  if(d.state== '正常'){}}

    <a class="layui-btn layui-btn-primary layui-btn-xs"> {{ d.state }}</a>

    {{#  } else {}}
    {{#  if(d.state== '报废'){}}
    <a class="layui-btn layui-btn-danger layui-btn-xs">{{ d.state }}</a>
    {{#  } else {}}
    <a class="layui-btn  layui-btn-xs">{{ d.state }}</a>
    {{#  } }}
    {{#  } }}
</script>
<script src="<%=request.getContextPath()%>/huazhi/lib/layui-v2.5.5/layui.all.js"></script>
<script src="<%=request.getContextPath()%>/huazhi/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['laypage','carousel','lifechain'], function() {
        var $ = layui.$
            , form = layui.form
            , table = layui.table
            , layer = layui.layer
            , laypage = layui.laypage
            , carousel = layui.carousel;

        var searchval = $('.searchval').val();
        var curnum = 1;
        var limitcount=8;
        search(searchval,limitcount,curnum);
        function search(searchval,limitcount,curnum) {
            $.ajax({
                type: "post",
                url: "<%=request.getContextPath()%>/rest/rfid/getMainTableLife?init=2",
                dataType: "json",
                async: false,
                data: "key=" + searchval+"&page="+curnum+"&limit="+limitcount,
                success: function (data) {
                    $("#searchImage").empty()
                    var datas=data.data;
                    for(var i=0;i<datas.length;i++) {
                        var id = "imageHtml" + i;
                        var ids = "image" + i;
                        var imageHtml = '<div class="layui-col-md3 layui-col-sm4">' +
                            '<a href="javascript:;" onclick="lifechainonclick(\''+datas[i].id+'\')"><div class="layui-carousel" id="' + id + '"  lay-filter="' + id + '" ><div carousel-item="" id="' + ids + '" ></div></div>' +
                            '</a>' +
                            '<div class="cmdlist-text" style="padding:5px;">' +
                            '<div class="price" style="text-align: center">' +datas[i].epcCode+
                            '</div>' +
                            '</div>' +
                            '<a href="javascript:;" onclick="info(\''+datas[i].id+'\')">' +
                            '<div class="cmdlist-text" style="padding:0px;"> ' +
                            '<p class="info" style="height: 20px;text-align: center;color:#ff671d;margin-bottom:0px;">' + datas[i].name + '</p>' +
                            '</div>' +
                            '</a>' +
                            '</div>';
                        $("#searchImage").append(imageHtml)
                    }
                    for(var i=0;i<datas.length;i++) {
                        for (var j = 0; j < datas[i].imageList.length; j++) {
                            var images = '<div><img src="' + datas[i].imageList[j].src + '" style="width:100%;height:100%;"/></div>';
                            $("#image"+i).append(images)
                        }
                    }
                    for(var i=0;i<datas.length;i++) {
                        carousel.render({
                            elem: '#imageHtml'+i
                            , width: '100%'
                            , arrow: 'none'
                            , indicator: 'inside'
                            , anim: 'fade'
                            , autoplay: 'true'
                            , interval: '5000'
                        });
                    }
                    laypage.render({
                        elem: 'laypage'
                        , first: '首页'
                        , last: '尾页'
                        , groups: 5
                        , count: data.count
                        , curr: curnum
                        , limit: limitcount
                        , layout: ['prev', 'page', 'next', 'skip', 'count']
                        , jump: function (obj, first) {
                            if (!first) {
                                curnum = obj.curr;
                                limitcount = obj.limit;
                                search(searchval,limitcount,curnum);
                            }
                        }
                    })
                }
            });
        }


        $("#search_btn").on('click',function(){
            var searchval = $('.searchval').val();
            var curnum = 1;
            var limitcount=8;
            search(searchval,limitcount,curnum);
        });

        //搜索事件
        $("#search_btn").on('click',function(){
            var searchval = $('.searchval').val();
            $('#curnum').val("1");
            table.reload('productLibrary', { //表格的id
                where: {
                    key: searchval,
                    page: 1,
                    limit: 8,
                },
                text: {
                    none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
                }
            })
        });

    });

    <%--function imageonclick(id){--%>
    <%--$.ajax({--%>
    <%--url:'<%=request.getContextPath()%>/rest/rfid/getBigImage',--%>
    <%--type: "post",--%>
    <%--dataType: "json",--%>
    <%--data:"id="+id,--%>
    <%--success:function(data){--%>
    <%--layer.photos({--%>
    <%--photos: data--%>
    <%--,anim: 0 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）--%>
    <%--});--%>
    <%--},--%>
    <%--});--%>
    <%--}--%>
    //生命链
    function  lifechainonclick(id){
        layer.open({
            title : "生命链信息",
            type: 2,
            content: '<%=request.getContextPath()%>/rest/getRoute?type=rfid&url=lifechain_info',
            //是否显示右上角关闭图标，默认为1，显示
            area: ['65%', '91%'],
            maxmin: true,
            shade:0.6,
            anim: 4,
            skin: 'layui-layer-molv',
            resize:true,
            success: function(layero, index){  //当你需要在层创建完毕时即执行一些语句，可以通过该回调 想相当于吧值转到子界面
                // var body = layer.getChildFrame('body',index);//建立父子联系  //当你试图在当前页获取iframe页的DOM元素时，你可以用此方法。
                // body.find("#id").val(id);
                var iframe = window['layui-layer-iframe' + index];
                //调用子页面的全局函数
                iframe.child(id);
            }
        });
        $('.layui-layer-setwin .layui-layer-max').css("display","none")
        $('.layui-layer-setwin .layui-layer-min').css("display","none")

//        setTimeout(function(){
//            layui.layer.tips('点击此处返回图片列表', '.layui-layer-setwin .layui-layer-close', {
//                tips: 3
//            });
//        },500)
//        layer.full(index);
//        // layer.restore(index)
//        window.sessionStorage.setItem("index",index);
//        //改变窗口大小时，重置弹窗的宽高，防止超出可视区域（如F12调出debug的操作）
//        $(window).on("resize",function(){
//            layer.full(window.sessionStorage.getItem("index"));
//        })
    }

    function info(id){
        layer.open({
            title: "详情",
            type: 2,
            content: '<%=request.getContextPath()%>/rest/getRoute?type=rfid&url=product_info',
            //是否显示右上角关闭图标，默认为1，显示
            area: ['90%', '91%'],
            maxmin: true,
            shade: 0.6,
            anim: 4,
            skin: 'layui-layer-molv',
            resize: true,
            success: function (layero, index) {  //当你需要在层创建完毕时即执行一些语句，可以通过该回调 想相当于吧值转到子界面
                var iframe = window['layui-layer-iframe' + index];
                //调用子页面的全局函数
                iframe.child(id);
            }
        });
    }
</script>
</body>
</html>